<template>
	<view class="container">
		<view class="header">
			<view class="header-return" @click="returnclick()"></view>
			<view class="header-title">热门详情</view>
		</view>
		<view class="body">
			<view class="" v-for="item,index in questionlist" :key="index">
				<view class="chaseask" v-if="index==2">
					追问时间：{{item.time}}
				</view>
				<view class="body-piece">
					<view class="body-piece-headr">
						<view class="body-piece-headr-icon studentsvg"  v-if="item.type=='问'||item.type=='追问'"></view>
						<view class="body-piece-headr-icon teachersvg"  v-if="item.type=='答'||item.type=='追答'"></view>
						<view class="body-piece-headr-name">{{item.name}}</view>
						<view class="body-piece-headr-studio">{{item.studio}}</view>
						<view class="body-piece-footer">
							{{item.time}}
						</view>
						<view class="body-piece-change">
							<view class="changicon" v-if="item.text2.length>0"></view>
							<view class="" v-else></view>
						</view>
					</view>
					<view class="body-piece-body" v-if="item.bank">
						引用：
						<view class="" v-for="itemb,index in item.bank" :key="index">
							<view class="chaseask" v-if="index==2">
								追问时间:{{itemb.time}}
							</view>
							<view class="body-piece piece2">
								<view class="body-piece-headr">
									<view class="body-piece-headr-icon studentsvg"  v-if="itemb.type=='问'||itemb.type=='追问'"></view>
									<view class="body-piece-headr-icon teachersvg"  v-if="itemb.type=='答'||itemb.type=='追答'"></view>
									<view class="body-piece-headr-name">{{itemb.name}}</view>
									<view class="body-piece-headr-studio" >{{itemb.studio}}</view>
									<view class="body-piece-footer">
										{{itemb.time}}
									</view>
									<view class="body-piece-change">
										<view class="changicon" v-if="itemb.text2.length>0"></view>
										<view class="" v-else></view>
									</view>
								</view>
								<view class="body-piece-body" v-if="itemb.text2.length>0">
									<view class="decoration" v-for="item2,index2 in itemb.text2" :key="index2">{{itemb.type}}：{{item2}}</view>
									<view>{{itemb.type}}：{{itemb.text}}</view>
								</view>
								<view class="body-piece-body" v-else>
									{{itemb.type}}：{{itemb.text}}
								</view>
								<view class="body-piece-body"  v-if="itemb.picture&&itemb.picture.length>0">
									<!-- <img @click="preview(item3.p1)" v-for="item3,index3 in itemb.picture" :key="index3" class="body-piece-body-img" :src='item3.p2'> -->
									<el-image
									    style="width: 20vw; height: 20vw;margin: 3vw;"
										v-for="item3,index3 in item.picture" 
										:key="index3"
									    :src="item3.p2"
									    :preview-src-list="[item3.p1]">
									</el-image>
								</view>
								<view class="body-piece-body" v-else></view>
								<view class="body-piece-body"  v-if="itemb.voice&&itemb.voice.length>0&&isrefresh"></view>
								<view class="body-piece-body" v-else></view>
							</view>
						</view>
					</view>
					<view class="body-piece-body" v-else-if="item.text2.length>0">
						<view class="decoration" v-for="item2,index2 in item.text2" :key="index2">{{item.type}}：{{item2}}</view>
						<view>{{item.type}}：{{item.text}}</view>
					</view>
					<!-- <view class="body-piece-body" v-if="item.text2.length>0">
						<view class="decoration" v-for="item2,index2 in item.text2" :key="index2">{{item.type}}：{{item2}}</view>
						<view>{{item.type}}：{{item.text}}</view>
					</view> -->
					<view class="body-piece-body" v-else>
						{{item.type}}：{{item.text}}
					</view>
					<view class="body-piece-body"  v-if="item.picture&&item.picture.length>0">
						<!-- <img @click="preview(item3.p1)" v-for="item3,index3 in item.picture" :key="index3" class="body-piece-body-img" :src='item3.p2'> -->
						<el-image
						    style="width: 20vw; height: 20vw;margin: 3vw;"
							v-for="item3,index3 in item.picture" 
							:key="index3"
						    :src="item3.p2"
						    :preview-src-list="[item3.p1]">
						</el-image>
					</view>
					<view class="body-piece-body" v-else></view>
				</view>
			</view>
			<button v-if="isrotate" class="rotatebutton" @click="rotate"></button>
		</view>
	</view>
</template>

<script>
	import { getQuestionsDetail } from "@/api/hot/index";
	import { handleImageUrl } from "@/utils/common"
	export default {
		data() {
			return {
				questionlist: [],
				time: '10:00',
				timer: null,
				isrotate: false,
				rotateAngle: 0,
				loading: false,
			}
		},
		mounted() {
			window.addEventListener('mouseup',this.handleonmousedown)
		},
		computed: {
		   refresh() {
		      return this.$store.state.user.refresh
		   }
		},
		watch: {
			refresh: {
				immediate: true,
				handler: function(newval) {
					console.log("newval",newval)
					this.Initialize()
				}
			},
		},
		created() {
		   this.Initialize()
		},
		methods: {
			Initialize(){
				this.questionsdetail()
			},
			handleonmousedown(){
				if(!this.loading){
					this.isrotate = false
				}
			},
			rotate(){
				this.isrotate = true
				let tp = document.getElementsByClassName('image-view-img')[0]
				let angle = this.rotateAngle%4
				if(angle == 0){
					tp.style.transform = 'translate(-50%,-50%) rotate(90deg)'
				}else if(angle == 1){
					tp.style.transform = 'translate(-50%,-50%) rotate(180deg)'
				}else if(angle == 2){
					tp.style.transform = 'translate(-50%,-50%) rotate(270deg)'
				}else if(angle == 3){
					tp.style.transform = 'translate(-50%,-50%)'
				}
				this.rotateAngle+=1
				this.isrotate = true
			},
			preview(imgUrl){
				this.$modal.loading("加载中，请耐心等待...")
				this.loading = true
				let that = this
				this.isrotate = true
				this.rotateAngle = 0
				let result
				window.URL = window.URL || window.webkitURL;
				var xhr = new XMLHttpRequest();
				xhr.open("get", imgUrl, true);
				xhr.responseType = "blob";
				xhr.onload = function(){
					that.$modal.closeLoading()
					that.loading = false
				    if(this.status == 200){
				        //得到一个blob对象
				        var blob = this.response;
				        console.log("blob", blob)
				        // 至关重要
				        let oFileReader = new FileReader();
				        oFileReader.onloadend = function(e){
				            // 此处拿到的已经是base64的图片了,可以赋值做相应的处理
							result = e.target.result
							uni.previewImage({
								current: 0,
								urls: [result]
							});
							
				        }
				        oFileReader.readAsDataURL(blob);
				    }
				}
				xhr.send();
			},
			questionsdetail(){
				getQuestionsDetail(this.$store.state.user.questionid).then(res => {
					console.log("res.data",res.data)
					//问
					this.questionlist=[]
					let data = res.data
					this.questionlist.push({
						name:  data.studentName, //学生名
						text: data.question, 
						text2: [], 
						time: data.questionTime, 
						type: '问', 
						studio: '',
						picture: this.dealpicture(data.questionPicture)
					})
					//答
					//答
					this.$store.state.user.teacherName = data.teacherName
					if(data.rejectReason){
						console.log("data.rejectReason1",data.rejectReason)
						this.questionlist.push({
							name: data.teacherName, //教师名
							text: data.rejectReason, 
							text2: [], 
							time: '', 
							type: '退回理由', 
							studio: data.studioName ,//教师工作室
							picture: [],
						})
						return
					}
					let questionBank=data.questionBank
					let data2 = data.answerHistoryList
					let answer={},text2=[]
					
					if(data2&&data2.length){
						for(let i in data2){
							if(data2[i].delFlag==0){
								let bank = null
								if(data2[i].questionBankId){
									bank=[]
									bank.push({
										name: data.studentName, //教师名
										text: questionBank.question.replace(/\|\|\|\|\|\|/g,"|"), 
										text2: [], 
										time: data2[i].answerTime, 
										type: '问', 
										studio: '' ,//教师工作室
										picture: this.dealpicture(questionBank.questionPicture),
									})
									bank.push({
										name: data.teacherName, //教师名
										text: questionBank.wordAnswer.replace(/\|\|\|\|\|\|/g,"|"), 
										text2: [], 
										time: data2[i].createTime, 
										type: '答', 
										studio: data.studioName ,//教师工作室
										picture: this.dealpicture(questionBank.pictureAnswer),
									})
								}
								answer={
									name:  data.teacherName, //教师名
									text: data2[i].wordAnswer, 
									text2: [], 
									time: data2[i].answerTime, 
									type: '答', 
									studio: data.studioName ,//教师工作室
									picture: this.dealpicture(data2[i].pictureAnswer),
									bank: bank
								}
							}else{
								text2.push(data2[i].wordAnswer)
							}
						}
						answer.text2=text2
						this.questionlist.push(answer)
					}
					//追问
					let data3 = data.questionsCloselyList
					for(let i in data3){
					
						this.questionlist.push({
							name:  data.studentName, //学生名
							text: data3[i].question, 
							text2: [], 
							time: data3[i].questionTime, 
							type: '追问', 
							studio: '',
							picture: this.dealpicture(data3[i].questionPicture),
						})
						//追答
						let data2 = data3[i].answerCloselyHistoryList
						let answer={},text2=[]
						if(data2&&data2.length){
							for(let j in data2){
								if(data2[j].delFlag==0){
									answer={
										name:  data.teacherName, //教师名
										text: data2[j].wordAnswer, 
										text2: [], 
										time: data2[j].answerTime, 
										type: '追答', 
										studio: data.studioName ,//教师工作室
										picture: this.dealpicture(data2[j].pictureAnswer),
									}
								}else{
									text2.push(data2[j].wordAnswer)
								}
								
							}
							answer.text2=text2
							this.questionlist.push(answer)
						}
					}
					console.log("this.questionlist",this.questionlist)
				});
			},
			dealpicture(data){
				let list=[]
				if(data!=""&&data!=null){
					list = data.split(';')
				}
				for(let i in list){
					let l = list[i].split('.')
					list[i] = {
						p1: handleImageUrl(list[i]),
						p2: handleImageUrl(list[i], '200x200')
					}
				}
				return list
			},
			returnclick(){
				this.$router.push(this.$store.state.user.urlquestion)
			},
		}
	}
</script>

<style lang="scss">
	.container {
		font-size: 4vw;
		background-color: #F6F7F8;
		width: 100vw;
		/* height: 87.3vh; */
		height: 100vh;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: 12.5vw 1fr;
	}
	.header{
		width: 100%;
		height: 12.5vw;
		background: #ffffff;
		border: 1px solid #F6F7F8;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		/* grid-template-rows: 1fr 1fr; */
	}
	.header-title{
		font-size: 5vw;
	}
	.header-return{
		position: absolute;
		width: 5vw;
		height: 5vw;
		left: 5vw;
		top: 3.5vw;
		background: url(../../static/index/return.svg);
		background-size: 100% 100%;
		cursor: pointer;
	}
	.body{
		width: 100%;
		height: 100%;
		overflow: auto;
	}
	.chaseask{
		margin: 8vw auto 0 auto;
		width: 90%;
		height: auto;
		font-size: 3.6vw;
		color: #B3B5B9;
		display: grid;
		align-items: center;
	}
	.body-piece{
		@include big_size(1.09);
		margin: 4vw auto 0 auto;
		padding: 0 0 3vw 0;
		width: 90%;
		min-height: auto;
		background: #ffffff;
		border-radius: 2vw;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-template-rows: 15vw auto auto;
	}
	.piece2{
		width: 110%;
		margin: 0 0 0 -5%;
		padding: none;
		transform: scale(0.9);
		background: rgb(245,246,248);
	}
	.body-piece-headr{
		margin: 0 0 0 3%;
		width: 90%;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-column-gap: 1vw;
		grid-template-columns: auto auto auto 1fr auto;
	}
	.body-piece-headr-icon{
		width: 8vw;
		height: 8vw;
	}
	.studentsvg{
		background: url(../../static/hot/student.svg);
		background-size: 100% 100%;
	}
	.teachersvg{
		background: url(../../static/hot/teacher.svg);
		background-size: 100% 100%;
	}
	.body-piece-headr-name{
		font-weight: 700;
		color: #363A44;
		width: 15vw;
		white-space: nowrap;
		text-overflow:ellipsis;
		overflow: hidden;
	}
	.body-piece-headr-studio{
		color: #B3B5B9;
		width: 20vw;
		white-space: nowrap;
		text-overflow:ellipsis;
		overflow:hidden;
	}
	.body-piece-change{
		
	}
	.changicon{
		width: 5vw;
		height: 5vw;
		background: url(../../static/index/change.png);
		background-size: 100% 100%;
	}
	.body-piece-body{
		margin: 0 0 0 5%;
		width: 90%;
		color: #515257;
	}
	.body-piece-body-img{
		margin: 2vw;
		width: 20vw;
		height: 20vw;
	}
	.decoration{
		text-decoration: line-through
	}
	.questionclosely{
		float: right;
		margin: 5vw 5vw 0 0;
		width: 16vw;
		height: 8vw;
		border-radius: 4vw;
		color: #ffffff;
		background: #1492FF;
		display: grid;
		justify-items: center;
		align-items: center;
		cursor: pointer;
	}
	.body-piece-footer{
		display: grid;
		justify-items: end;
		align-items: center;
		width: 30vw;
		min-width: 35vw;
		color: #B3B5B9;
		font-size: 3.6vw;
	}
	.rotatebutton{
		position: absolute;
		top: 3vw;
		left: 45vw;
		z-index: 99999;
		color: #ffffff;
		background: url(../../static/mine/redo.svg);
		background-size: 100% 100%;
		width: 6vw;
		height: 6vw;
		cursor: point;
	}
</style>